<template>
  <view class="raffle">
    <navBar title="抽奖活动" background-color="transparent"></navBar>
    <view :style="{
      padding: `${getSystemInfo.navBarHeight}px 0 0`,
      height: `calc(100vh - ${getSystemInfo.navBarHeight}px)`,
    }">
      <view class="raffle-body">
        <!-- 我的抽奖码 -->
        <view class="raffle-box">
          <view class="rb-title">
            <text>我的抽奖码</text>
          </view>
          <view class="codes">
            <text class="code-item" v-for="item in codes" :key="item.id">{{ item.raffleCode }}</text>
          </view>
          <view class="raffle-state rs-off" v-if="stage.lotteryStatus === '2'">
            <text>已开奖</text>
          </view>
          <view class="raffle-state rs-on" v-if="stage.lotteryStatus === '1'">
            <text>未开奖</text>
          </view>
          <view class="raffle-state rs-on" v-if="stage.lotteryStatus === '0'">
            <text>未达标</text>
          </view>
          <view class="raffle-query">
            <text class="rq-title">中奖号码</text>
            <view class="rq-select" @click="visibleSelect = true">
              <text>{{ stage.batchCode || '' }}</text>
              <u-icon name="arrow-down"></u-icon>
            </view>
            <text class="rq-click" @click="onClickView">点击查看</text>
          </view>
          <u-picker
            key-name="batchCode"
            visible-item-count="8"
            :show="visibleSelect"
            :columns="stageList"
            @cancel="visibleSelect = false"
            @confirm="onSelectStage">
          </u-picker>
          
          <u-popup
            :show="visibleWinning"
            :round="10"
            mode="bottom"
            closeable
            @close="visibleWinning = false"
          >
            <view class="winning-info">
              <view class="wi-title">
                <text>中奖信息</text>
              </view>
              <scroll-view scroll-y style="height: 35vh">
                <view class="wi-body">
                  <view class="wi-name">
                    <text>体彩排列五开奖结果</text>
                  </view>
                  <view class="wi-codes wi-result">
                    <view class="wi-c-item result-item" v-for="(item, index) in lotteryNo" :key="index">
                      <text>{{ item }}</text>
                    </view>
                  </view>
                  <view class="wi-name">
                    <text>特等奖</text>
                  </view>
                  <view class="wi-codes">
                    <view class="wi-c-item" v-for="item in grandPrize" :key="item.id">
                      <text>{{ item.raffleCode }}</text>
                    </view>
                  </view>
                  <view class="wi-name">
                    <text>一等奖</text>
                  </view>
                  <view class="wi-codes">
                    <view class="wi-c-item" v-for="item in firstPrize" :key="item.id">
                      <text>{{ item.raffleCode }}</text>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </view>
          </u-popup>
        </view>
        
        <!-- 好奖等你来拿！ -->
        <view class="raffle-box raffle-ad">
          <view class="rb-title">
            <text>好奖等你来拿！</text>
          </view>
          <view class="ra-body">
            <u--image width="100%" height="1288rpx" show-loading src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/raffle_ad%402x.jpg"></u--image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { mapState, mapGetters, mapMutations } from 'vuex'
  import navBar from '@/components/navBar.vue'
  
  export default {
    components: {
    	navBar
    },
    data() {
      return {
        visibleWinning: false, // 中奖信息
        visibleSelect: false, // 选择期
        stage: {}, // 当前期
        stageList: [], // 所有期
        codes: [], // 我的抽奖码
        result: [], // 开奖结果
      }
    },
    computed: {
      ...mapGetters('global', ['getSystemInfo']),
      ...mapState('user', ['userInfo']),
      
      // 是否已开奖
      isAwarded() {
        return this.stage.lotteryStatus === '2'
      },
      
      // 中奖号码
      lotteryNo() {
        return this.result.length > 0
          ? this.result[0].lotteryNo
          : ''
      },
      
      // 特等奖
      grandPrize() {
        return this.result.length > 0
          ? this.result.slice(0, 1)
          : []
      },
      
      // 一等奖
      firstPrize() {
        return this.result.length > 0
          ? this.result.slice(1)
          : []
      }
    },
    methods: {
      async getStageList() {
        const userId = this.userInfo.id
        const { datas } = await this.$request({
          url: '/marketing-center/raffleActivityBatchEntity/list',
          data: {
            paseNum: 1,
            pageSize: 100,
            userId
          }
        })
        if (Array.isArray(datas.data) && datas.data.length > 0) {
          this.stage = datas.data[0]
          this.stageList.push(datas.data || [])
        }
      },
      
      // 查看
      async onClickView() {
        this.visibleWinning = true
        const userId = this.userInfo.id
        const batchId = this.stage.id
        const { datas } = await this.$request({
          url: '/marketing-center/raffleActivityBatchDetailEntity/list',
          data: {
            paseNum: 1,
            pageSize: 1000,
            batchId,
            winningStatus: 2
          }
        })
        this.result = datas.data || []
      },
      
      // 我的抽奖码
      async getMyCodes() {
        const userId = this.userInfo.id
        const batchId = this.stage.id
        const { datas } = await this.$request({
          url: '/marketing-center/raffleActivityBatchDetailEntity/list',
          data: {
            paseNum: 1,
            pageSize: 50,
            raffleStatus: 0,
            batchId,
            userId
          }
        })
        this.codes = datas.data || []
      },
      
      // 选择某期
      onSelectStage(data) {
        this.stage = data.value[0]
        this.getMyCodes()
        this.visibleSelect = false
      },
    },
    async created() {
      await this.getStageList()
      this.getMyCodes()
    }
  }
</script>

<style lang="scss" scoped>
.raffle {
  width: 100vw;
  height: 100vh;
  background: url("https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/raffle_bg%402x.png") center top no-repeat;
  background-color: #cf1a1b;
  background-size: 100%;
  
  /deep/ .uicon-home,
  /deep/ .uniui-back,
  /deep/ .a-title{
    color: #fff !important;
  }
  
  .raffle-body {
    box-sizing: border-box;
    height: 100%;
    padding: 0 0 env(safe-area-inset-bottom);
    overflow-y: auto;
  }
  
  .raffle-box {
    margin: 84rpx 32rpx 0;
    padding: 0 44rpx 44rpx;
    border-radius: 8rpx;
    background-color: #fff;
    .rb-title {
      width: 406rpx;
      height: 64rpx;
      margin: 0 auto;
      font-size: 34rpx;
      line-height: 64rpx;
      transform: translate(0, -36rpx);
      text-align: center;
      color: #fff;
      background: url("https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/mine/raffle_title_bg%402x.png") center no-repeat;
      background-size: contain;
    }
  }
  
  .codes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24rpx;
    font-size: 28rpx;
    .code-item {
      width: calc((100% - 24rpx * 3) / 4);
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      background-color: #FFF0E4;
    }
  }
  
  .raffle-state {
    width: 300rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-size: 28rpx;
    margin: 40rpx auto 0;
    border-radius: 32rpx;
    text-align: center;
    color: #fff;
    &.rs-off {
      background-color: #CF1A1B;
    }
    &.rs-on {
      background-color: #A6A6A6;
    }
  }
  
  .raffle-query {
    display: flex;
    flex-direction: row;
    font-size: 24rpx;
    gap: 16rpx;
    margin: 40rpx 0 0;
    align-items: center;
    .rq-title {
      color: rgba(0, 0, 0, 0.65);
    }
    .rq-click {
      color: #CF1A1B;
    }
    .rq-select {
      box-sizing: border-box;
      width: 380rpx;
      height: 60rpx;
      padding: 0 20rpx;
      flex: 1;
      border-radius: 8rpx;
      border: 1px solid #ccc;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
  }
  
  .winning-info {
    .wi-title {
      height: 104rpx;
      border-bottom: 2rpx solid #eee;
      line-height: 104rpx;
      text-align: center;
    }
    .wi-body {
      padding: 0 74rpx;
    }
    .wi-name {
      font-size: 32rpx;
      line-height: 1;
      margin: 48rpx 0 0;
    }
    .wi-codes {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 24rpx;
      font-size: 28rpx;
      margin: 24rpx 0 0;
      .wi-c-item {
        box-sizing: border-box;
        width: calc((100% - 24rpx * 3) / 4);
        height: 64rpx;
        line-height: 64rpx;
        text-align: center;
        background-color: #fff8f8;
        border: 1px solid #e17879;
        color: #e17879;
        border-radius: 6rpx;
      }
      &.wi-result {
        margin-top: 30rpx;
        justify-content: space-between;
        .result-item {
          width: 64rpx;
          border-radius: 64rpx;
          background-color: #FFFAF5;
          border-color: #FF9A38;
          color: #FF9A38;
        }
      }
    }
  }
  
  /deep/ .u-popup__content__close {
    top: 17px !important;
    .uicon-close {
      font-size: 18px !important;
      line-height: 1 !important;
    }
  }
  
  .raffle-ad {
    margin-top: 44rpx;
    padding: 0 0 20rpx;
    background: none;
    .ra-body {
      border-radius: 10rpx;
      overflow: hidden;
      border: 2px solid #fff;
    }
    .rb-title {
      transform: translate(0, 28rpx);
      position: relative;
      z-index: 2;
    }
  }
}
</style>
